<style scoped>
  .error {
    animation-name: shakeError;
    animation-fill-mode: forwards;
    animation-duration: .6s;
    animation-timing-function: ease-in-out;
  }

  .form-group-error {
    display: block;
    color:#f57f6c;
  }
</style>

<template>
  <div class="di">
    <notifications group="main" position="bottom right" />

    <!-- Contact doesn't have a frequency set -->
    <a v-if="!isActive" class="pointer" href="" @click.prevent="showUpdate">
      {{ $t('people.stay_in_touch_modal_title') }}
    </a>

    <!-- Contact has a frequency set -->
    <div v-else class="di">
      <span>
        {{ $tc('people.stay_in_touch_frequency', frequency, { count: frequency }) }}
      </span>
      <a class="pointer" href="" @click.prevent="showUpdate">
        {{ $t('app.edit') }}
      </a>
    </div>

    <sweet-modal ref="updateModal" overlay-theme="dark" :title="$t('people.stay_in_touch_modal_title')">
      <div class="tc mw-100">
        <svg viewBox="0 0 423 74" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs />
          <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Group-6" transform="translate(2.000000, 2.000000)">
              <g id="Group-3" transform="translate(341.519872, 38.183805) rotate(17.000000) translate(-341.519872, -38.183805) translate(324.519872, 20.183805)">
                <path id="Fill-45" d="M6.93842857,23.5330169 L2.60464286,22.0075932 C0.662392857,21.3235932 0.394035714,18.6742373 2.15839286,17.6107119 L29.2497143,1.28379661 C31.0863214,0.176949153 33.3461071,1.82745763 32.86525,3.92461017 L27.3171786,28.1343051 C26.9868929,29.5761356 25.466,30.3931525 24.0896071,29.8684068 L13.4160357,25.8010169 L23.88925,10.3942373 L6.93842857,23.5330169" fill="#BBE2EE" />
                <path id="Fill-46" d="M6.93842857,23.5330169 L7.13939286,22.9576271 L2.80560714,21.4315932 C2.39639286,21.2863729 2.10132143,21.0404746 1.89671429,20.7353898 C1.69271429,20.4309153 1.58585714,20.0642034 1.58585714,19.6968814 C1.59071429,19.087322 1.86332143,18.5033898 2.47107143,18.1342373 L29.5617857,1.80671186 C29.8762857,1.61816949 30.1895714,1.53945763 30.4961786,1.53884746 C30.96975,1.53823729 31.4323929,1.73715254 31.7723929,2.06725424 C32.1117857,2.39918644 32.3230714,2.84522034 32.3236786,3.35471186 C32.3236786,3.49322034 32.3078929,3.63783051 32.2732857,3.7879322 L26.7258214,27.9970169 C26.5303214,28.8555254 25.7695714,29.4168814 24.9505357,29.4181017 C24.7374286,29.4181017 24.5206786,29.3802712 24.3045357,29.2978983 L14.35225,25.5050847 L24.3901429,10.7383729 C24.5589286,10.4906441 24.5231071,10.1562712 24.30575,9.9500339 C24.0883929,9.74440678 23.7544643,9.72732203 23.5182857,9.91098305 L6.56807143,23.0497627 L6.93842857,23.5330169 L7.13939286,22.9576271 L6.93842857,23.5330169 L7.30939286,24.0162712 L21.2275357,13.2278644 L12.9145357,25.4568814 C12.8095,25.6112542 12.7803571,25.804678 12.8368214,25.9834576 C12.8926786,26.1622373 13.02625,26.3050169 13.2005,26.3715254 L23.8740714,30.4389153 C24.2280357,30.5737627 24.5935357,30.6384407 24.9505357,30.6384407 C26.3190357,30.6390508 27.5800714,29.7 27.9091429,28.2709831 L33.4566071,4.06128814 C33.51125,3.82271186 33.5379643,3.5859661 33.5379643,3.35471186 C33.5385714,2.49559322 33.1730714,1.72922034 32.6163214,1.18983051 C32.0595714,0.649220339 31.3048929,0.319728814 30.4961786,0.318508475 C29.9758571,0.317898305 29.4355,0.459457627 28.9370357,0.760271186 L1.84632143,17.0871864 C0.8585,17.679661 0.366714286,18.7047458 0.371571429,19.6968814 C0.371571429,20.300339 0.545214286,20.9013559 0.88825,21.4157288 C1.23067857,21.9301017 1.74857143,22.3535593 2.40367857,22.5829831 L6.73807143,24.1090169 C6.93114286,24.1773559 7.14728571,24.1419661 7.30939286,24.0162712 L6.93842857,23.5330169" fill="#5CBBDE" />
                <polyline id="Fill-47" fill="#BBE2EE" points="12.2703571 34.9425763 13.4160357 25.8010169 23.88925 10.3942373 6.93842857 23.5330169 12.2703571 34.9425763" />
                <path id="Fill-48" d="M12.2703571,34.9425763 L12.8726429,35.0188475 L14.0001071,26.0231186 L24.3901429,10.7383729 C24.5589286,10.4906441 24.5231071,10.1562712 24.30575,9.9500339 C24.0883929,9.74440678 23.7544643,9.72732203 23.5182857,9.91098305 L6.56807143,23.0497627 C6.34282143,23.2242712 6.26814286,23.5342373 6.38896429,23.792339 L11.7202857,35.2018983 C11.8350357,35.4471864 12.0985357,35.5875254 12.3650714,35.5448136 C12.631,35.5027119 12.8386429,35.287322 12.8726429,35.0188475 L12.2703571,34.9425763 L12.8198214,34.6832542 L7.69553571,23.7172881 L21.2275357,13.2278644 L12.9145357,25.4568814 C12.8605,25.5362034 12.8252857,25.6289492 12.8131429,25.7247458 L11.6674643,34.8663051 L12.2703571,34.9425763 L12.8198214,34.6832542 L12.2703571,34.9425763" fill="#5CBBDE" />
                <polyline id="Fill-49" fill="#BBE2EE" points="12.2703571 34.9425763 18.1013571 27.5863729 13.4160357 25.8010169 12.2703571 34.9425763" />
                <path id="Fill-50" d="M12.2703571,34.9425763 L12.7451429,35.3227119 L18.5761429,27.9665085 C18.6975714,27.8133559 18.73825,27.6138305 18.6866429,27.424678 C18.6356429,27.2361356 18.4990357,27.0854237 18.3168929,27.0158644 L13.6309643,25.2305085 C13.4567143,25.164 13.2624286,25.1810847 13.10275,25.2781017 C12.9430714,25.3745085 12.8368214,25.5386441 12.8131429,25.7247458 L11.6674643,34.8663051 C11.6334643,35.1366102 11.7840357,35.3989831 12.0341786,35.5045424 C12.2843214,35.6107119 12.57575,35.535661 12.7451429,35.3227119 L12.2703571,34.9425763 L12.8726429,35.0188475 L13.9217857,26.6461017 L17.1080714,27.860339 L11.7949643,34.5624407 L12.2703571,34.9425763 L12.8726429,35.0188475 L12.2703571,34.9425763" fill="#5CBBDE" />
              </g>
              <g id="Group-2" transform="translate(275.500000, 38.000000) rotate(-4.000000) translate(-275.500000, -38.000000) translate(256.000000, 20.000000)">
                <path id="Fill-97" d="M15.5451562,17.9652 C15.5451562,16.9386 16.3921875,16.1064 17.4342188,16.1064 L30.1275,16.1064 L30.1275,3.1872 C30.1275,1.8618 29.0367188,0.7872 27.69,0.7872 L5.143125,0.7872 C3.79640625,0.7872 2.705625,1.8618 2.705625,3.1872 L2.705625,22.3872 L1.22484375,27.4848 C0.90796875,28.5768 2.169375,29.451 3.1078125,28.791 L8.799375,24.7872 L15.5451562,24.7872 L15.5451562,17.9652" fill="#F5C894" />
                <path id="Fill-98" d="M15.5451562,17.9652 L16.1545312,17.9652 C16.1545312,17.2698 16.7273438,16.7076 17.4342188,16.7058 L30.1275,16.7058 C30.2859375,16.7058 30.444375,16.6422 30.5601563,16.5306 C30.6698437,16.4184 30.736875,16.2642 30.736875,16.1064 L30.736875,3.1872 C30.736875,1.53 29.371875,0.1878 27.69,0.1872 L5.143125,0.1872 C3.46125,0.1878 2.09625,1.53 2.09625,3.1872 L2.09625,22.3032 L0.63984375,27.3198 C0.59109375,27.4896 0.56671875,27.6606 0.56671875,27.828 C0.56671875,28.338 0.7921875,28.794 1.12734375,29.1084 C1.4625,29.4246 1.9134375,29.6184 2.4009375,29.6196 C2.76046875,29.6202 3.13828125,29.5092 3.46125,29.2794 L8.994375,25.3872 L15.5451562,25.3872 C15.7035937,25.3872 15.8620312,25.323 15.9717188,25.2114 C16.0875,25.0998 16.1545312,24.945 16.1545312,24.7872 L16.1545312,17.9652 L14.9357812,17.9652 L14.9357812,24.1872 L8.799375,24.1872 C8.67140625,24.1872 8.54953125,24.2262 8.4459375,24.2988 L2.754375,28.3026 C2.62640625,28.3896 2.51671875,28.4184 2.4009375,28.4196 C2.24859375,28.4202 2.09015625,28.3542 1.974375,28.2432 C1.8525,28.1304 1.78546875,27.99 1.78546875,27.828 C1.78546875,27.774 1.7915625,27.7152 1.8159375,27.6498 L3.290625,22.5516 C3.30890625,22.4976 3.315,22.443 3.315,22.3872 L3.315,3.1872 C3.32109375,2.1936 4.13765625,1.389 5.143125,1.3872 L27.69,1.3872 C28.7015625,1.389 29.518125,2.1936 29.518125,3.1872 L29.518125,15.5058 L17.4342188,15.5064 C16.0509375,15.5064 14.9357812,16.6068 14.9357812,17.9652 L15.5451562,17.9652" fill="#E5742B" />
                <path id="Fill-99" d="M34.9842187,16.1064 L17.4342188,16.1064 C16.3921875,16.1064 15.5451562,16.9386 15.5451562,17.9652 L15.5451562,31.047 C15.5451562,32.0736 16.3921875,32.9058 17.4342188,32.9058 L32.6076562,32.9058 L36.001875,34.9116 C36.9585937,35.4756 38.1164062,34.5876 37.7934375,33.5382 L36.8732812,30.5058 L36.8732812,17.9652 C36.8732812,16.9386 36.02625,16.1064 34.9842187,16.1064" fill="#BBE2EE" />
                <path id="Fill-100" d="M34.9842188,16.1064 L34.9842188,15.5064 L17.4342188,15.5064 C16.0509375,15.5064 14.9357812,16.6068 14.9357812,17.9652 L14.9357812,31.047 C14.9357812,32.4054 16.0509375,33.5058 17.4342188,33.5058 L32.4370313,33.5058 L35.685,35.4264 C35.9835937,35.6022 36.3126562,35.6874 36.6295313,35.6868 C37.123125,35.6862 37.5740625,35.4888 37.903125,35.1708 C38.2382813,34.8534 38.4576563,34.3998 38.4576563,33.894 C38.4576563,33.7206 38.4332812,33.5424 38.3784375,33.366 L37.4826563,30.417 L37.4826563,17.9652 C37.4826563,16.6068 36.3614063,15.5064 34.9842188,15.5064 L34.9842188,16.7058 C35.6910937,16.7076 36.2639063,17.2698 36.2639063,17.9652 L36.2639063,30.5058 C36.2639063,30.5622 36.27,30.624 36.2882812,30.678 L37.2145312,33.7104 C37.2328125,33.7764 37.2389063,33.837 37.2389063,33.894 C37.2389063,34.0542 37.171875,34.197 37.0560937,34.3098 C36.9403125,34.422 36.781875,34.488 36.6295313,34.4868 C36.5259375,34.4862 36.4284375,34.4634 36.3126562,34.3974 L32.9184375,32.3916 C32.8270313,32.3358 32.7173438,32.3058 32.6076563,32.3058 L17.4342188,32.3058 C16.7273438,32.3046 16.1545313,31.7418 16.1545313,31.047 L16.1545313,17.9652 C16.1545313,17.2698 16.7273438,16.7076 17.4342188,16.7058 L34.9842188,16.7058 L34.9842188,16.1064" fill="#5CBBDE" />
                <path id="Fill-101" d="M22.1446875,24.3966 C22.1446875,25.059 21.59625,25.5966 20.9259375,25.5966 C20.2495313,25.5966 19.7071875,25.059 19.7071875,24.3966 C19.7071875,23.7336 20.2495313,23.1966 20.9259375,23.1966 C21.59625,23.1966 22.1446875,23.7336 22.1446875,24.3966" fill="#FFFFFE" />
                <path id="Fill-102" d="M27.6290625,24.3966 C27.6290625,25.059 27.080625,25.5966 26.4103125,25.5966 C25.7339063,25.5966 25.1915625,25.059 25.1915625,24.3966 C25.1915625,23.7336 25.7339063,23.1966 26.4103125,23.1966 C27.080625,23.1966 27.6290625,23.7336 27.6290625,24.3966" fill="#FFFFFE" />
                <path id="Fill-103" d="M33.1134375,24.3966 C33.1134375,25.059 32.565,25.5966 31.8946875,25.5966 C31.2182813,25.5966 30.6759375,25.059 30.6759375,24.3966 C30.6759375,23.7336 31.2182813,23.1966 31.8946875,23.1966 C32.565,23.1966 33.1134375,23.7336 33.1134375,24.3966" fill="#FFFFFE" />
              </g>
              <g id="Group" transform="translate(120.210360, 37.580603) rotate(-14.000000) translate(-120.210360, -37.580603) translate(107.210360, 18.580603)">
                <path id="Fill-130" d="M22.6586977,37.0813651 L3.30986047,37.0813651 C1.97418605,37.0813651 0.891255814,36.0010794 0.891255814,34.6686667 L0.891255814,3.3035873 C0.891255814,1.9711746 1.97418605,0.890888889 3.30986047,0.890888889 L22.6586977,0.890888889 C23.9943721,0.890888889 25.0773023,1.9711746 25.0773023,3.3035873 L25.0773023,34.6686667 C25.0773023,36.0010794 23.9943721,37.0813651 22.6586977,37.0813651" fill="#FCE499" />
                <path id="Fill-131" d="M22.6586977,37.0813651 L22.6586977,36.4781905 L3.30986047,36.4781905 C2.30795349,36.476381 1.49772093,35.6675238 1.49590698,34.6686667 L1.49590698,3.3035873 C1.49772093,2.30412698 2.30795349,1.49587302 3.30986047,1.49406349 L22.6586977,1.49406349 C23.66,1.49587302 24.4708372,2.30412698 24.4726512,3.3035873 L24.4726512,34.6686667 C24.4708372,35.6675238 23.66,36.476381 22.6586977,36.4781905 L22.6586977,37.6845397 C24.3287442,37.6839365 25.6813488,36.3340317 25.6819535,34.6686667 L25.6819535,3.3035873 C25.6813488,1.63761905 24.3287442,0.287714286 22.6586977,0.287714286 L3.30986047,0.287714286 C1.63981395,0.287714286 0.287209302,1.63761905 0.286604651,3.3035873 L0.286604651,34.6686667 C0.287209302,36.3340317 1.63981395,37.6839365 3.30986047,37.6845397 L22.6586977,37.6845397 L22.6586977,37.0813651" fill="#F5BB27" />
                <path id="Fill-132" d="M5.72846512,26.223619 L5.72846512,6.92203175 C5.72846512,6.25612698 6.26962791,5.71568254 6.93776744,5.71568254 L19.0307907,5.71568254 C19.6989302,5.71568254 20.240093,6.25612698 20.240093,6.92203175 L20.240093,26.223619 C20.240093,26.890127 19.6989302,27.4299683 19.0307907,27.4299683 L6.93776744,27.4299683 C6.26962791,27.4299683 5.72846512,26.890127 5.72846512,26.223619" fill="#BBE2EE" />
                <path id="Fill-133" d="M5.72846512,26.223619 L6.33311628,26.223619 L6.33311628,6.92203175 C6.33372093,6.58907937 6.604,6.31946032 6.93776744,6.31885714 L19.0307907,6.31885714 C19.3645581,6.31946032 19.6348372,6.58907937 19.6354419,6.92203175 L19.6354419,26.223619 C19.6348372,26.5565714 19.3645581,26.8261905 19.0307907,26.8267937 L6.93776744,26.8267937 C6.604,26.8261905 6.33372093,26.5565714 6.33311628,26.223619 L5.12381395,26.223619 C5.1244186,27.2230794 5.93586047,28.0331429 6.93776744,28.0331429 L19.0307907,28.0331429 C20.0326977,28.0331429 20.8441395,27.2230794 20.8447442,26.223619 L20.8447442,6.92203175 C20.8441395,5.92257143 20.0326977,5.11311111 19.0307907,5.11250794 L6.93776744,5.11250794 C5.93586047,5.11311111 5.1244186,5.92257143 5.12381395,6.92203175 L5.12381395,26.223619 L5.72846512,26.223619" fill="#5CBBDE" />
                <path id="Fill-134" d="M16.0075349,33.3615873 L9.96102326,33.3615873 C9.29288372,33.3615873 8.75172093,32.8211429 8.75172093,32.1552381 C8.75172093,31.4887302 9.29288372,30.9488889 9.96102326,30.9488889 L16.0075349,30.9488889 C16.6750698,30.9488889 17.2168372,31.4887302 17.2168372,32.1552381 C17.2168372,32.8211429 16.6750698,33.3615873 16.0075349,33.3615873" fill="#BBE2EE" />
                <path id="Fill-135" d="M16.0075349,33.3615873 L16.0075349,32.7584127 L9.96102326,32.7584127 C9.62725581,32.7578095 9.35697674,32.4881905 9.35637209,32.1552381 C9.35697674,31.8222857 9.62725581,31.5526667 9.96102326,31.5520635 L16.0075349,31.5520635 C16.3406977,31.5526667 16.6115814,31.8222857 16.612186,32.1552381 C16.6115814,32.4881905 16.3406977,32.7578095 16.0075349,32.7584127 L16.0075349,33.9647619 C17.0094419,33.9641587 17.8208837,33.1546984 17.8214884,32.1552381 C17.8208837,31.1557778 17.0094419,30.3463175 16.0075349,30.3457143 L9.96102326,30.3457143 C8.95851163,30.3463175 8.14706977,31.1557778 8.14706977,32.1552381 C8.14706977,33.1546984 8.95851163,33.9641587 9.96102326,33.9647619 L16.0075349,33.9647619 L16.0075349,33.3615873" fill="#5CBBDE" />
              </g>
              <g id="Group-4" transform="translate(195.373740, 35.038750) rotate(6.000000) translate(-195.373740, -35.038750) translate(174.873740, 16.038750)">
                <path id="Fill-186" d="M38.673403,30.1261587 L31.5039104,20.0615873 C31.0455672,19.4186032 30.2977761,19.0355873 29.5004179,19.0355873 L25.1580896,19.0355873 L25.1580896,15.4165397 C25.1580896,14.7500317 24.609791,14.2101905 23.934209,14.2101905 C23.2580149,14.2101905 22.7103284,14.7500317 22.7103284,15.4165397 L22.7103284,19.0355873 L18.8098209,19.0355873 L18.8098209,15.4165397 C18.8098209,14.7500317 18.2615224,14.2101905 17.5859403,14.2101905 C16.9097463,14.2101905 16.3620597,14.7500317 16.3620597,15.4165397 L16.3620597,19.0355873 L12.0191194,19.0355873 C11.2217612,19.0355873 10.4745821,19.4186032 10.0162388,20.0615873 L2.84613433,30.1261587 C2.55668657,30.5326984 2.40186567,31.0164444 2.40186567,31.5128571 L2.40186567,34.718127 C2.40186567,36.0505397 3.49785075,37.1308254 4.84962687,37.1308254 L36.6705224,37.1308254 C38.0222985,37.1308254 39.1182836,36.0505397 39.1182836,34.718127 L39.1182836,31.5128571 C39.1182836,31.0164444 38.9628507,30.5326984 38.673403,30.1261587" fill="#BBE2EE" />
                <path id="Fill-187" d="M38.673403,30.1261587 L39.1745821,29.7799365 L32.0044776,19.7147619 C31.4317015,18.9107302 30.4972687,18.4324127 29.5004179,18.4324127 L25.1580896,18.4324127 L25.1580896,19.0355873 L25.7700299,19.0355873 L25.7700299,15.4165397 C25.7694179,14.4164762 24.948194,13.6070159 23.934209,13.6070159 C22.9196119,13.6070159 22.0983881,14.4164762 22.0983881,15.4165397 L22.0983881,19.0355873 L22.7103284,19.0355873 L22.7103284,18.4324127 L18.8098209,18.4324127 L18.8098209,19.0355873 L19.4217612,19.0355873 L19.4217612,15.4165397 C19.4211493,14.4164762 18.5999254,13.6070159 17.5859403,13.6070159 C16.5713433,13.6070159 15.7501194,14.4164762 15.7501194,15.4165397 L15.7501194,19.0355873 L16.3620597,19.0355873 L16.3620597,18.4324127 L12.0191194,18.4324127 C11.0222687,18.4324127 10.0878358,18.9107302 9.5150597,19.7153651 L2.34556716,29.7799365 C1.98391045,30.2872063 1.78992537,30.8927937 1.78992537,31.5128571 L1.78992537,34.718127 C1.78992537,36.3840952 3.15944776,37.7333968 4.84962687,37.734 L36.6705224,37.734 C38.3607015,37.7333968 39.7296119,36.3840952 39.7302239,34.718127 L39.7302239,31.5128571 C39.7302239,30.8927937 39.5362388,30.2872063 39.1745821,29.7799365 L38.673403,30.1261587 L38.1728358,30.4729841 C38.3894627,30.7775873 38.5063433,31.1406984 38.5063433,31.5128571 L38.5063433,34.718127 C38.5045075,35.7169841 37.6838955,36.5258413 36.6705224,36.5276508 L4.84962687,36.5276508 C3.83564179,36.5258413 3.01564179,35.7169841 3.01380597,34.718127 L3.01380597,31.5128571 C3.01380597,31.1406984 3.13007463,30.7775873 3.34670149,30.4729841 L10.516806,20.4084127 C10.8607164,19.925873 11.4212537,19.6387619 12.0191194,19.6387619 L16.3620597,19.6387619 C16.523,19.6387619 16.6802687,19.5742222 16.7947015,19.4620317 C16.9085224,19.3498413 16.974,19.1942222 16.974,19.0355873 L16.974,15.4165397 C16.9746119,15.0835873 17.2481493,14.8139683 17.5859403,14.8133651 C17.9231194,14.8139683 18.1972687,15.0835873 18.1978806,15.4165397 L18.1978806,19.0355873 C18.1978806,19.1942222 18.2627463,19.3498413 18.3765672,19.4620317 C18.491,19.5742222 18.6482687,19.6387619 18.8098209,19.6387619 L22.7103284,19.6387619 C22.8712687,19.6387619 23.0291493,19.5742222 23.1429701,19.4620317 C23.256791,19.3498413 23.3222687,19.1942222 23.3222687,19.0355873 L23.3222687,15.4165397 C23.3228806,15.0835873 23.5964179,14.8139683 23.934209,14.8133651 C24.2713881,14.8139683 24.5455373,15.0835873 24.5461493,15.4165397 L24.5461493,19.0355873 C24.5461493,19.1942222 24.6110149,19.3498413 24.7248358,19.4620317 C24.8392687,19.5742222 24.9965373,19.6387619 25.1580896,19.6387619 L29.5004179,19.6387619 C30.0982836,19.6387619 30.6594328,19.925873 31.0027313,20.4084127 L38.1728358,30.4729841 L38.673403,30.1261587" fill="#5CBBDE" />
                <path id="Fill-188" d="M40.3360448,10.8794603 C40.3360448,10.8794603 41.2612985,0.940349206 20.7600746,0.940349206 L20.7594627,0.970507937 L20.7594627,0.940349206 C0.314537313,0.940349206 1.18349254,10.8794603 1.18349254,10.8794603 L1.18349254,13.148 C1.18349254,13.7348889 1.78870149,14.2101905 2.53465672,14.2101905 L7.93808955,14.2101905 C8.68404478,14.2101905 9.28864179,13.7348889 9.28864179,13.148 L9.28864179,8.96980952 C9.28864179,8.96980952 13.919806,7.45765079 20.7594627,7.45765079 C27.5997313,7.45765079 32.2308955,8.96980952 32.2308955,8.96980952 L32.2308955,13.148 C32.2308955,13.7348889 32.8354925,14.2101905 33.5820597,14.2101905 L38.9848806,14.2101905 C39.7314478,14.2101905 40.3360448,13.7348889 40.3360448,13.148 L40.3360448,10.8794603" fill="#BBE2EE" />
                <path id="Fill-189" d="M40.3360448,10.8794603 L40.9455373,10.9343492 C40.9467612,10.9174603 40.9541045,10.8312063 40.9541045,10.6864444 C40.9541045,10.2847302 40.8984179,9.4312381 40.5012687,8.37025397 C39.9089104,6.77847619 38.5247015,4.73190476 35.5108955,3.12866667 C32.4970896,1.52180952 27.8787761,0.337777778 20.7600746,0.337174603 C20.427791,0.337174603 20.1554776,0.60015873 20.1487463,0.92768254 L20.1481343,0.95784127 L20.7594627,0.970507937 L21.371403,0.963873016 L21.371403,0.933714286 C21.3677313,0.602571429 21.0954179,0.337174603 20.7594627,0.337174603 C16.0022388,0.337174603 12.3642537,0.869174603 9.57319403,1.7027619 C5.38752239,2.94952381 3.10008955,4.89657143 1.89456716,6.70247619 C0.687208955,8.50657143 0.566044776,10.1297143 0.566044776,10.705746 C0.566044776,10.8372381 0.572776119,10.9156508 0.574,10.9319365 C0.601537313,11.2437778 0.865895522,11.4826349 1.18349254,11.4826349 L1.18349254,10.8794603 L1.06355224,10.2883492 C0.777164179,10.3444444 0.571552239,10.591746 0.571552239,10.8794603 L0.571552239,13.148 C0.570940299,13.652254 0.836522388,14.0901587 1.19756716,14.3706349 C1.5610597,14.6553333 2.02980597,14.8127619 2.53465672,14.8133651 L7.93808955,14.8133651 C8.4429403,14.8127619 8.91107463,14.6553333 9.27456716,14.3706349 C9.63622388,14.0901587 9.90119403,13.652254 9.90058209,13.148 L9.90058209,8.96980952 L9.28864179,8.96980952 L9.48140299,9.5428254 L9.52668657,9.52834921 C10.0186866,9.37453968 14.4332239,8.06022222 20.7594627,8.0608254 C24.1337015,8.0608254 26.9645373,8.43419048 28.946,8.80634921 C29.9367313,8.99212698 30.7151194,9.17790476 31.2432239,9.31663492 C31.5069701,9.386 31.7082985,9.44330159 31.8429254,9.48250794 C31.9096269,9.5024127 31.959806,9.51809524 31.9928507,9.52834921 L32.0381343,9.5428254 L32.2308955,8.96980952 L31.6189552,8.96980952 L31.6189552,13.148 C31.6183433,13.652254 31.8839254,14.0901587 32.2449701,14.3706349 C32.6084627,14.6553333 33.076597,14.8127619 33.5820597,14.8133651 L38.9848806,14.8133651 C39.4903433,14.8127619 39.9584776,14.6553333 40.3219701,14.3706349 C40.6830149,14.0901587 40.948597,13.652254 40.9479851,13.148 L40.9479851,10.8794603 C40.9479851,10.591746 40.7423731,10.3444444 40.4559851,10.2883492 L40.3360448,10.8794603 L40.3360448,11.4826349 C40.651806,11.4826349 40.9167761,11.244381 40.9455373,10.9343492 L40.3360448,10.8794603 L40.3360448,10.2762857 C40.0221194,10.2762857 39.7577612,10.512127 39.7271642,10.8203492 C39.6959552,11.1279683 39.9082985,11.410254 40.2161045,11.4711746 L40.3360448,10.8794603 L39.7241045,10.8794603 L39.7241045,13.148 C39.7234925,13.2300317 39.6867761,13.3235238 39.5588806,13.4272698 C39.4334328,13.5273968 39.2259851,13.607619 38.9848806,13.6070159 L33.5820597,13.6070159 C33.3403433,13.607619 33.1335075,13.5273968 33.0080597,13.4272698 C32.8801642,13.3235238 32.8434478,13.2306349 32.8428358,13.148 L32.8428358,8.96980952 C32.8428358,8.7092381 32.6739403,8.47942857 32.4230448,8.39739683 C32.380209,8.38412698 27.6915224,6.85507937 20.7594627,6.85447619 C13.8280149,6.85507937 9.13932836,8.38412698 9.09649254,8.39739683 C8.84559701,8.47942857 8.67670149,8.7092381 8.67670149,8.96980952 L8.67670149,13.148 C8.67608955,13.2306349 8.63937313,13.3235238 8.51147761,13.4272698 C8.38602985,13.5273968 8.17919403,13.607619 7.93808955,13.6070159 L2.53465672,13.6070159 C2.29355224,13.607619 2.08610448,13.5273968 1.96065672,13.4272698 C1.83276119,13.3235238 1.79604478,13.2300317 1.79543284,13.148 L1.79543284,10.8794603 L1.18349254,10.8794603 L1.30343284,11.4711746 L1.30404478,11.4711746 C1.61185075,11.410254 1.82358209,11.1279683 1.79298507,10.8203492 C1.76177612,10.512127 1.49741791,10.2762857 1.18349254,10.2762857 L1.18349254,10.8794603 L1.79298507,10.8275873 L1.74770149,10.8312063 L1.79359701,10.8281905 L1.79298507,10.8275873 L1.74770149,10.8312063 L1.79359701,10.8281905 C1.79237313,10.8185397 1.78992537,10.7763175 1.78992537,10.705746 C1.78992537,10.4300952 1.82908955,9.7255873 2.16259701,8.82987302 C2.66683582,7.48660317 3.80932836,5.70301587 6.57591045,4.2107619 C9.34310448,2.72152381 13.7613134,1.54292063 20.7594627,1.54352381 L20.7594627,0.940349206 L20.1475224,0.946984127 L20.1475224,0.977142857 C20.151194,1.30647619 20.4222836,1.57187302 20.756403,1.57368254 C21.0911343,1.57488889 21.3646716,1.31190476 21.371403,0.982571429 L21.3720149,0.953015873 L20.7600746,0.940349206 L20.7600746,1.54352381 C25.4151045,1.54292063 28.9313134,2.06165079 31.5767313,2.84577778 C35.5463881,4.02619048 37.5492687,5.7832381 38.5950746,7.32796825 C39.6384328,8.87390476 39.7302239,10.2479365 39.7302239,10.6864444 L39.7277761,10.8010476 L39.7265522,10.8245714 L39.7338955,10.8251746 L39.7265522,10.8245714 L39.7338955,10.8251746 L39.7265522,10.8245714 L40.3360448,10.8794603 L40.3360448,10.2762857 L40.3360448,10.8794603" fill="#5CBBDE" />
                <path id="Fill-190" d="M26.8794776,25.6705079 C26.8794776,27.335873 24.1398209,28.686381 20.7600746,28.686381 C17.3803284,28.686381 14.6406716,27.335873 14.6406716,25.6705079 C14.6406716,24.0051429 17.3803284,22.6546349 20.7600746,22.6546349 C24.1398209,22.6546349 26.8794776,24.0051429 26.8794776,25.6705079" fill="#FFFFFE" />
                <path id="Fill-191" d="M26.8794776,25.6705079 L26.2675373,25.6705079 C26.2663134,25.919619 26.1702388,26.1729524 25.9309701,26.4546349 C25.5760448,26.8744444 24.8906716,27.3008889 23.9856119,27.5994603 C23.0811642,27.9010476 21.9649851,28.0832063 20.7600746,28.0832063 C19.1531194,28.0844127 17.7028209,27.7568889 16.7065821,27.2634921 C16.2078507,27.0186032 15.826,26.7333016 15.5885672,26.4546349 C15.3492985,26.1729524 15.2532239,25.919619 15.2526119,25.6705079 C15.2532239,25.4213968 15.3492985,25.1680635 15.5885672,24.886381 C15.9434925,24.4665714 16.6288657,24.040127 17.5345373,23.7409524 C18.4383731,23.4399683 19.5545522,23.2578095 20.7600746,23.2578095 C22.3664179,23.256 23.8167164,23.584127 24.8135672,24.0775238 C25.3116866,24.3224127 25.6935373,24.6077143 25.9309701,24.886381 C26.1702388,25.1680635 26.2663134,25.4213968 26.2675373,25.6705079 L27.4914179,25.6705079 C27.4920299,25.0866349 27.2454179,24.5467937 26.865403,24.1070794 C26.2920149,23.4441905 25.4255075,22.9501905 24.3772537,22.5985397 C23.3277761,22.2493016 22.089209,22.0520635 20.7600746,22.0514603 C18.9866716,22.0532698 17.3772687,22.4000952 16.1588955,22.9984444 C15.5506269,23.2994286 15.0359851,23.663746 14.6541343,24.1070794 C14.2741194,24.5467937 14.0275075,25.0866349 14.0287313,25.6705079 C14.0275075,26.254381 14.2741194,26.7942222 14.6541343,27.2339365 C15.2281343,27.8968254 16.0946418,28.3908254 17.1428955,28.7424762 C18.1917612,29.0917143 19.4303284,29.2889524 20.7600746,29.2895556 C22.5328657,29.287746 24.1422687,28.9403175 25.3606418,28.3425714 C25.9695224,28.0415873 26.4841642,27.6772698 26.865403,27.2339365 C27.2454179,26.7942222 27.4920299,26.254381 27.4914179,25.6705079 L26.8794776,25.6705079" fill="#CCD4D3" />
              </g>
              <g id="Group-5" transform="translate(67.000000, 43.000000)" stroke="#F5BB27" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
              <g id="Group-5" transform="translate(42.000000, 2.000000)" stroke="#A2B88C" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
              <g id="Group-5" transform="translate(22.000000, 51.000000)" stroke="#E5742B" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
              <g id="Group-5" transform="translate(0.000000, 17.000000)" stroke="#5CBBDE" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
              <g id="Group-5" transform="translate(414.000000, 37.500000) scale(-1, -1) translate(-414.000000, -37.500000) translate(409.000000, 32.000000)" stroke="#F5BB27" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
              <g id="Group-5" transform="translate(386.000000, 5.500000) scale(-1, -1) translate(-386.000000, -5.500000) translate(381.000000, 0.000000)" stroke="#A2B88C" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
              <g id="Group-5" transform="translate(386.000000, 64.500000) scale(-1, -1) translate(-386.000000, -64.500000) translate(381.000000, 59.000000)" stroke="#E5742B" stroke-linecap="square" stroke-width="3">
                <path id="Line" d="M0.277777778,5.5 L9.73854798,5.5" />
                <path id="Line" d="M5.5,10.6764706 L5.5,0.323529412" />
              </g>
            </g>
          </g>
        </svg>
      </div>
      <form @submit.prevent="update()">
        <div class="mb4">
          <div v-if="limited" class="mt3 mb3 form-information-message br2">
            <div class="pa3 flex">
              <div class="mr3">
                <svg viewBox="0 0 20 20">
                  <g fill-rule="evenodd">
                    <circle cx="10" cy="10" r="9" fill="currentColor" /><path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m1-5v-3a1 1 0 0 0-1-1H9a1 1 0 1 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2m-1-5.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2" />
                  </g>
                </svg>
              </div>
              <div v-html="$t('settings.personalisation_paid_upgrade_vue', {url: 'settings/subscriptions' })"></div>
            </div>
          </div>
          <p class="mt3 b mb3" :class="[ dirltr ? 'tl' : 'tr' ]">
            {{ $t('people.stay_in_touch_modal_desc', { firstname: contact.first_name }) }}
          </p>
          <div class="mb2">
            <toggle-button class="mr2" :sync="true" :labels="true" :value="stateInput" @change="stateInput = !stateInput" />
            <div class="dib relative" style="top: -2px;">
              <stay-in-touch-label
                v-model="frequencyInput"
                :class="{ 'form-group-error': $v.frequencyInput.$error }"
              >
                <div class="dib">
                  <form-input
                    :id="'frequency'"
                    v-model.number="frequencyInput"
                    :input-type="'number'"
                    :width="60"
                    :required="true"
                    :validator="$v.frequencyInput"
                    @input="onInput($event)"
                  />
                </div>
              </stay-in-touch-label>
            </div>
          </div>

          <div v-if="errorMessage != ''" class="form-error-message mb3">
            <div class="pa2">
              <p class="mb0">
                {{ errorMessage }}
              </p>
            </div>
          </div>
        </div>
      </form>
      <div slot="button" class="tc">
        <a class="btn" href="" @click.prevent="closeModal()">
          {{ $t('app.cancel') }}
        </a>
        <a class="btn btn-primary" href="" @click.prevent="update()">
          {{ $t('app.save') }}
        </a>
      </div>
    </sweet-modal>
  </div>
</template>

<script>
import { SweetModal } from 'sweet-modal-vue';
import { ToggleButton } from 'vue-js-toggle-button';
import { validationMixin } from 'vuelidate';
import { required, numeric } from 'vuelidate/lib/validators';

let StayInTouchLabel = Vue.component('stay-in-touch-label', {

  props: {
    value: {
      type: Number,
      default: 0,
    },
  },
  render(createElement) {
    let text = this.$tc('people.stay_in_touch_modal_label', this.value, {count: '[slot]'});
    let texts = _.split(text, '[slot]');
    return createElement('div', [
      createElement('span', texts[0]),
      this.$slots.default,
      createElement('span', texts[1]),
    ]);
  },
});

export default {

  components: {
    SweetModal,
    ToggleButton,
    StayInTouchLabel,
  },

  mixins: [validationMixin],

  props: {
    hash: {
      type: String,
      default: '',
    },
    contact: {
      type: Object,
      default: null,
    },
    limited: {
      type: Boolean,
      default: false,
    },
  },

  validations: {
    frequencyInput: {
      required,
      numeric,
    },
  },

  data() {
    return {
      frequency: 0,
      isActive: false,
      errorMessage: '',
      frequencyInput: 0,
      stateInput: false,
    };
  },

  computed: {
    dirltr() {
      return this.$root.htmldir == 'ltr';
    }
  },

  mounted() {
    this.prepareComponent();
  },

  methods: {
    prepareComponent() {
      if (this.contact.stay_in_touch_frequency == null) {
        this.frequency = 0;
      } else {
        this.frequency = parseInt(this.contact.stay_in_touch_frequency);
      }
      this.isActive = (this.frequency > 0);

      // record initial values when the component loads so we can
      // put those values back if user puts wrong values when updating
      // the counter
      this.stateInput = this.isActive;
      this.frequencyInput = this.frequency;
    },

    showUpdate() {
      this.errorMessage = '';
      this.$refs.updateModal.open();
    },

    closeModal() {
      this.$refs.updateModal.close();
    },

    update() {
      this.errorMessage = '';

      // check if you need a subscription to access this feature
      if (this.limited) {
        this.errorMessage = this.$t('people.stay_in_touch_premium');
        return;
      }

      this.$v.$touch();

      if (this.$v.$invalid) {
        return;
      }

      axios.post('people/' + this.hash + '/stayintouch',   {frequency: this.frequencyInput, state: this.stateInput})
        .then(response => {
          this.$refs.updateModal.close();
          this.isActive = this.stateInput;
          this.frequency = this.frequencyInput;

          this.$notify({
            group: 'main',
            title: this.$t('app.default_save_success'),
            text: '',
            width: '500px',
            type: 'success'
          });
        })
        .catch(error => {
          this.errorMessage = this.$t('app.error_save');
        });
    },

    onInput(value) {
      this.stateInput = value > 0;
    }
  }
};
</script>
